<template>
  <div class="comment-list">
    <div class="cmt-item" v-for="cmts in item" :key="cmts.commentId">
      <div class="cmt-head">
        <img :src="cmts.user.avatarUrl" />
      </div>
      <div class="cmt-wrap">
        <div class="cmt-hearder">
          <div class="cmt-meta">
            <span class="cmt-user">{{ cmts.user.nickname }}</span>
            <div class="cmt-time">{{ cmts.timeStr }}</div>
          </div>
        </div>
        <div class="cmt-content">
          <span class="cmt-text">{{ cmts.content }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    item: Array,
  },
};
</script>
<style lang="less" scoped>
.comment-list {
  .cmt-item {
    padding-top: 10px;
    width: 100%;
    display: flex;
    .cmt-head {
      height: 35px;
      margin: 0px 10px;
      & > img {
        display: block;
        border-radius: 50%;
        width: 30px;
        height: 30px;
      }
    }
    .cmt-wrap {
      padding: 0 10px 10px 0;
      .cmt-hearder {
        display: flex;
        .cmt-meta {
          width: 100%;
          flex: 1;
          .cmt-user {
            font-size: 14px;
            color: #666;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          .cmt-time {
            font-size: 9px;
            color: #999;
          }
        }
        .cmt-like {
          width: 65px;
          height: 22px;
          line-height: 22px;
          font-size: 11px;
          color: #999;
          -webkit-box-flex: 0;
          flex: none;
          text-align: right;
        }
      }
      .cmt-content {
        position: relative;
        margin-top: 5px;
        .cmt-text {
          color: #333;
          font-size: 15px;
          line-height: 22px;
        }
      }
    }
  }
}
</style>